@import '~styles/colors.less';

.marker {
  background-color: @primary;
  opacity: 0.2;
  margin-bottom: 0px;
  transition: all 0.3s ease-out;
}

.vertical {
  height: 0;

  &.visible {
    height: 8px;
    margin-bottom: 1px;
  }
  &.active {
    height: 12px;
  }
}

.horizontal {
  flex: 0 0 7px;
  width: 0;

  &.visible {
    width: 7px;
  }
  &.active {
    width: 10px;
  }
}

.active {
  background-color: #33CC33;
  opacity: 0.7;
}
